<template>
  <section>
    <search-box>
      <div class="flex-row-reverse">
        <el-button type="primary" @click="FnOpenAz('add')" :disabled="FnBtnDisabled('eci_2_createAz')">新增</el-button>
        <el-button type="text" @click="FnGetAzList">
          <i class="el-icon-refresh" style="font-size: 20px"></i>
        </el-button>
      </div>
    </search-box>
    <el-table :data="azList" border>
      <el-table-column prop="zone_id" min-width="120" label="地区(Zone)ID"></el-table-column>
      <el-table-column prop="zone_name" min-width="120" label="地区(Zone)"></el-table-column>
      <el-table-column prop="region_id" min-width="120" label="地域(Region)ID"></el-table-column>
      <el-table-column prop="region_name" min-width="120" label="地域(Region)"></el-table-column>
      <el-table-column prop="available_zone_id" min-width="120" label="可用区(AZ)ID"></el-table-column>
      <el-table-column prop="available_zone_name" min-width="120" label="可用区(AZ)"></el-table-column>
      <el-table-column prop="repo_domain" min-width="180" label="镜像仓库地址(repo_domain)"></el-table-column>
      <el-table-column prop="rpc_host" min-width="130" label="rpc地址(rpc_host)"></el-table-column>
      <el-table-column prop="ws_host" min-width="150" label="远程连接地址(ws_host)"></el-table-column>
      <el-table-column prop="vk_image" min-width="150" label="vk镜像版本(vk_image)"></el-table-column>
      <el-table-column min-width="120" label="操作">
        <template #default="scope">
          <el-button type="text" class="p-0" @click="FnOpenAz('edit', scope.row)" :disabled="FnBtnDisabled('eci_2_editAz')">编辑</el-button>
          <!-- <el-button type="text" class="p-0" @click="FnDelAz(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
  </section>
  <az-dialog v-model:visible="visible" :title="diaType === 'add' ? '新增可用区' : '编辑可用区'" :type="diaType" :curRow="curRow" @searchList="FnGetAzList"></az-dialog>
</template>
<script setup>
import { ref, watch } from 'vue';
import AzDialog from './azDialog.vue';
import searchBox from '@/components/search-box.vue';
import azService from '@/service/eci/az.js'
import { authBtnDisabled } from '@/utils/auth.js'
import { useRoute } from 'vue-router';
const route = useRoute();

const azList = ref([]);
const visible = ref(false);
const diaType = ref('')
const curRow = ref(null);
const FnOpenAz = (type, row) => {
  diaType.value = type;
  curRow.value = row;
  visible.value = true;
}
watch(() => visible.value, (nVal) => {
  if(!nVal) {
    setTimeout(() => {
      curRow.value = null;
    }, 0)
  }
})
const FnBtnDisabled = (key) => {
  return authBtnDisabled(key, route.meta.name)
}
const FnGetAzList = () => {
  azService.getAzs().then(res => {
    azList.value = res.data;
  })
} 
FnGetAzList()
</script>
<style scoped>
</style>